<template>
    <div style="width: 100%;height: 100vh; overflow: hidden;padding: 15px; box-sizing: border-box;">
        <!-- 页面标题 -->
        <header style="text-align: center;">
            <h1>
                {{ setConstructionSiteBillInfo.booxName }}账本详情
            </h1>

            <p style="color: #259345;" @click="() => { isSalaryShow = true; }">点击设置每天的工资和上午下午时间 (如: 当天工资300 , 上午3小时,
                下午5小时)</p>

            <div>
                <span>日工资: {{ setConstructionSiteBillInfo.salary }}</span>
                <span style="margin: 0 15px;">已结清: <span style="color: #259345;">{{ closed }}</span>元</span>
                <span>未结清: <span style="color: red;">{{ noClosed }}</span>元</span>
            </div>
        </header>

        <ul class="list">
            <li v-for="(item, index) in dataList" :key="index">
                <span>
                    {{ item.createTime }}
                    <el-tag type="primary" style="margin-left: 5px;" v-if="item.manHour == 1">全天</el-tag>
                    <el-tag type="primary" style="margin-left: 5px;" v-if="item.manHour == 2">上午干</el-tag>
                    <el-tag type="primary" style="margin-left: 5px;" v-if="item.manHour == 3">下午干</el-tag>
                    <el-tag type="primary" style="margin-left: 5px;" v-if="item.manHour == 4">
                        {{ item.workTime }}小时
                    </el-tag>

                    <el-tag type="success" style="margin-left: 5px;" v-if="item.isSend">已经发了</el-tag>
                </span>
                <div class="operation">
                    <span v-if="!item.isSend" @click="send(item)">已发</span>
                    <span @click="del(item)" style="color: red;margin-left: 10px;">删除</span>
                </div>
            </li>
        </ul>

        <button class="btn" @click="addBook">添加账本</button>


        <el-dialog title="新增记录" :visible.sync="open" width="90%">
            <el-form :model="addForm">
                <el-form-item label="日期">
                    <el-date-picker v-model="addForm.createTime" type="date" placeholder="选择日期" style="width: 100%;"
                        format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="工时" style="margin-top: 15px;">
                    <el-radio-group v-model="addForm.manHour">
                        <el-radio :label="1">全天</el-radio>
                        <el-radio :label="2" style="margin-left: 10px;">上午</el-radio>
                        <el-radio :label="3" style="margin: 0 10px;">下午</el-radio>
                        <el-radio :label="4">自定义</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="请输入工时" style="margin-top: 15px;" v-if="addForm.manHour == 4">
                    <el-input placeholder="输入工时(单位小时)" type="number" v-model="addForm.workTime"></el-input>
                </el-form-item>
            </el-form>

            <el-button class="save" @click="save">保存</el-button>
        </el-dialog>

        <el-dialog title="设置日工资" :visible.sync="isSalaryShow" width="90%">
            <el-form :model="setConstructionSiteBillInfo">
                <el-form-item label="请输入日工资" style="margin-top: 15px;">
                    <el-input v-model="setConstructionSiteBillInfo.salary" placeholder="请输入日工资金额"
                        type="number"></el-input>
                </el-form-item>

                <el-form-item label="请输入上午工作时间" style="margin-top: 15px;">
                    <el-input v-model="setConstructionSiteBillInfo.morning" placeholder="请输入上午工作时间"
                        type="number"></el-input>
                </el-form-item>

                <el-form-item label="请输入日下午工作时间" style="margin-top: 15px;">
                    <el-input v-model="setConstructionSiteBillInfo.afternoon" placeholder="请输入下午工作时间"
                        type="number"></el-input>
                </el-form-item>
            </el-form>

            <el-button class="save" @click="saveSalary">保存</el-button>
        </el-dialog>
    </div>
</template>

<script>
import { addConstructionSiteBill, addConstructionSiteBillDetail, deleteConstructionSiteBillDetail, getConstructionSiteBill, getConstructionSiteBillDetail } from '@/api/getConstructionSiteBill';
import moment from 'moment';
import { del } from 'vue';

export default {
    data() {
        return {
            open: false,
            dataList: [],
            id: '',
            addForm: {
                createTime: moment().format('YYYY-MM-DD'),
                manHour: 1,
            },

            setConstructionSiteBillInfo: {},
            isSalaryShow: false,
            closed: 0,
            noClosed: 0
        };
    },

    methods: {
        async getInit() {
            let result = await getConstructionSiteBillDetail({ page: 1, size: 10000, parentId: this.id });
            if (result.code == 20000) {
                this.dataList = result.data || []
                this.calculate()
            }
        },


        addBook() {
            this.open = true;
        },

        goAtPresent(item) {
            this.$router.push(`/constructionSiteBillDetail?id=${item.id}`)
        },

        async getConstructionSiteBillDetail(id) {
            let result = await getConstructionSiteBill({ id: id });
            if (result.code == 20000) {
                this.setConstructionSiteBillInfo = result.data[0]
            }
        },

        async save() {
            if (this.addForm.manHour == 4 && !this.addForm.workTime) {
                this.$message.warning('请输入这一天的工时');
                return
            }
            let result = await addConstructionSiteBillDetail({
                ...this.addForm,
                parentId: this.id
            })

            if (result.code == 20000) {
                this.getInit()
                this.open = false
            }
        },

        async send(item) {
            item.isSend = 1
            let result = await addConstructionSiteBillDetail(item)
            if (result.code == 20000) {
                this.getInit()
            }
        },

        async del(item) {
            let result = await deleteConstructionSiteBillDetail(item)
            if (result.code == 20000) {
                this.$message.success(result.msg);
                this.getInit()
            }
        },

        async saveSalary() {
            let result = await addConstructionSiteBill({ id: this.id, ...this.setConstructionSiteBillInfo })
            if (result.code == 20000) {
                this.isSalaryShow = false
                this.$message.success(result.msg)
            }
        },

        calculate() {
            this.closed = 0
            this.noClosed = 0
            this.dataList.forEach(item => {
                let { salary, morning, afternoon } = this.setConstructionSiteBillInfo
                let wordTime = Number(morning) + Number(afternoon)
                let money;
                if (item.manHour == 1) {
                    money = Number(salary)
                } else if (item.manHour == 2) {
                    // 上午干
                    money = (Number(salary) / Number(wordTime)) * Number(morning)

                } else if (item.manHour == 3) {
                    // 下午干
                    money = (Number(salary) / Number(wordTime)) * Number(afternoon)
                } else {
                    console.log(item.wordTime, 'item.wordTime');

                    // 自定义
                    money = (Number(salary) / Number(wordTime)) * Number(item.workTime)
                }

                if (item.isSend == 1) {
                    this.closed = Number(this.closed) + Number(money)
                } else {
                    this.noClosed = Number(this.noClosed) + Number(money)
                }
            })
        },
    },

    async mounted() {
        this.id = this.$route.query.id
        await this.getConstructionSiteBillDetail()
        this.getInit()
    }
};
</script>

<style scoped lang="scss">
.list {
    width: 100%;
    amx-height: 75vh;
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    flex-wrap: wrap;
    overflow-y: auto;
    padding: 0;

    li {
        flex: 0 0 100%;
        width: 100%;
        height: 40px;
        // border-radius: 10px;
        padding: 0 10px;
        box-sizing: border-box;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #999;

        .operation {
            font-size: 14px;
            color: #259344;
            font-weight: 700;
        }
    }
}

.btn {
    width: 98%;
    margin: 0 auto;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: #2B9C4A;
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
    font-size: 18px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.save {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 15px auto 0;
    height: 40px;
    background-color: #2B9C4A;
    border-radius: 10px;
    color: #fff;

}
</style>